<template>
  <div style="width: 100%;">
    <toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <editor style="height: 200px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" @onChange="onChange" />
  </div>
</template>

<script>
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {DomEditor} from '@wangeditor/editor'
import store from '@/store/index'
//import {uploadImgApi, uploadImgApi2} from "@/api/common";
import Setting from "@/setting";
import { mapState } from "vuex";
import {tencentCosAuthApi, tencentCosUploadApi} from "@/api/common";
var uploadToken = ''

export default {
  name: 'WangEditor',
  components: {Editor, Toolbar},
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        toolbarKeys: ["headerSelect", "blockquote", "|", "bold", "underline", "italic", "color", "bgColor", "|", "fontSize", "lineHeight", "|", "bulletedList", "numberedList", "todo", "|", "insertLink", "insertTable", "divider", "|", 'uploadImage', "|", "undo", "redo",
          // {key: "group-image", title: "图片", menuKeys: ['uploadImage']}, // 'insertImage',
          // {key: "group-video", title: "视频", menuKeys: [ 'uploadVideo']} // 'insertVideo',
        ],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadVideo: {
            fieldName: 'file',
            // 上传视频的服务器地址
            server: 'https://bbwrj-1251144292.cos.ap-guangzhou.myqcloud.com',
            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 200 * 1024 * 1024, // 200M
            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 1,
            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],
            // 自定义增加 http  header
            headers: {
              token: uploadToken
            },
            async customUpload(file, insertFn) {
              // file 即选中的文件
              // 自己实现上传，并得到图片 url poster
              const formData = new FormData();
              const params = {
                file_name: file.name,
                file_module: 'product'
              }
              const res = await tencentCosAuthApi(params)
              // 把res.data的参数放到formData
              for (let key in res.data) {
                formData.append(key, res.data[key])
              }
              formData.append('success_action_status', 200);
              formData.append('file', file);
              const response = await tencentCosUploadApi(res.url, formData)
              const url = `${res.src}`
              const poster = file.name
              // 最后插入视频
              insertFn(url, poster)
            },
          },
          uploadImage: {
            fieldName: 'file',
            // 上传视频的服务器地址
            server: 'https://bbwrj-1251144292.cos.ap-guangzhou.myqcloud.com',
            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 200 * 1024 * 1024, // 200M
            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 自定义增加 http  header
            headers: {
              token: store.state.user.token
            },
            async customUpload(file, insertFn) {
              // file 即选中的文件
              // 自己实现上传，并得到图片 url poster
              const formData = new FormData();
              const params = {
                file_name: file.name,
                file_module: 'product'
              }
              const res = await tencentCosAuthApi(params)
              // 把res.data的参数放到formData
              for (let key in res.data) {
                formData.append(key, res.data[key])
              }
              formData.append('success_action_status', 200);
              formData.append('file', file);
              const response = await tencentCosUploadApi(res.url, formData)
              const url = `${res.src}`
              const poster = file.name
              // 最后插入图片
              insertFn(url, poster)
            },
          },
        }
      },
      mode: 'default', // or 'simple'
    }
  },
  watch: {
    value(val) {
      this.html = val;
    },
    uploadToken(val) {
      //this.editorConfig.MENU_CONF.uploadVideo.headers.token = val
      //this.editorConfig.MENU_CONF.uploadImage.headers.token = val
      //uploadToken = val
    }
  },
  mounted() {
    //if (!this.$store.state.user.uploadToken) {
    //  this.$store.dispatch('user/getUploadToken')
    //} else {
    //  this.editorConfig.MENU_CONF.uploadVideo.headers.token = this.uploadToken
    //  this.editorConfig.MENU_CONF.uploadImage.headers.token = this.uploadToken
    //
    //  uploadToken = this.uploadToken
    //}
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.$nextTick(() => {
        const toolbar = DomEditor.getToolbar(this.editor)
        const curToolbarConfig = toolbar.getConfig()
      })
    },
    onChange(editor) {
      this.$emit('change', this.html)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ video {
  max-width: 100%;
  height: 200px;
}

/deep/ .w-e-text-container .w-e-scroll {

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    border: 0px solid transparent;
    background-clip: content-box;
    background-color: var(--td-scrollbar-color);
    border-radius: 11px;
  }
}

</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
